<!-- <template>
  <h2>form表单</h2>
  <el-form ref="refForm" :model="form" label-width="80px">
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动时间">
      <el-col :span="11">
        <el-date-picker
          type="datetime"
          placeholder="选择日期"
          v-model="form.date1"
          value-format="x"
          :default-value="new Date(Date.now())"
        ></el-date-picker>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-date-picker
          type="datetime"
          placeholder="选择时间"
          v-model="form.date2"
          value-format="x"
        ></el-date-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="即时配送">
      <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活动性质">
      <el-checkbox-group v-model="form.type">
        <el-checkbox value="1" name="type">美食/餐厅线上活动</el-checkbox>
        <el-checkbox value="2" name="type">地推活动</el-checkbox>
        <el-checkbox value="3" name="type">线下主题活动</el-checkbox>
        <el-checkbox value="4" name="type">单纯品牌曝光</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊资源">
      <el-radio-group v-model="form.resource">
        <el-radio value="1">线上品牌商赞助</el-radio>
        <el-radio value="2">线下场地免费</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活动形式">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
  <hr />
  <h4>表单验证</h4>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="refRuleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="ruleForm.date1"
            value-format="x"
            :default-value="new Date(Date.now())"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-date-picker
            type="datetime"
            placeholder="选择日期2"
            v-model="ruleForm.date2"
            value-format="x"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="即时配送" prop="delivery">
      <el-switch v-model="ruleForm.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活动性质" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox value="1" name="type">美食/餐厅线上活动</el-checkbox>
        <el-checkbox value="2" name="type">地推活动</el-checkbox>
        <el-checkbox value="3" name="type">线下主题活动</el-checkbox>
        <el-checkbox value="4" name="type">单纯品牌曝光</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊资源" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio value="1">线上品牌商赞助</el-radio>
        <el-radio value="2">线下场地免费</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活动形式" prop="desc">
      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('refRuleForm')">立即创建</el-button>
      <el-button @click="resetForm('refRuleForm')">重置</el-button>
    </el-form-item>
  </el-form>
  <hr />
  <h4>自定义校验规则</h4>
  <el-form
    :model="ruleForm2"
    status-icon
    :rules="rules2"
    ref="refRuleForm2"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="密码" prop="pass">
      <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="ruleForm2.age"></el-input>
    </el-form-item>
    <el-form-item label="活动时间">
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="ruleForm2.date1"
            value-format="x"
            :default-value="new Date(Date.now())"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="ruleForm2.date2"
            value-format="x"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm2('refRuleForm2')">提交</el-button>
      <el-button @click="resetForm2('refRuleForm2')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'FormCom',
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm2.checkPass !== '') {
          this.$refs.refRuleForm2.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var checkdate1 = (rule, value, callback) => {
      const now = Date.now()
      if (value === '') {
        callback(new Error('请选择日期'))
      } else {
        if (value < now) {
          return callback(new Error('开始日期必须大于当前时间'))
        }
        if (this.ruleForm2.date1 !== '') {
          this.$refs.refRuleForm2.validateField('date2')
        }
        callback()
      }
    }
    var checkdate2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择日期'))
      } else {
        if (this.ruleForm2.date1 && value < this.ruleForm2.date1) {
          return callback(new Error('结束日期必须大于开始时间'))
        }
        callback()
      }
    }
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        date2: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        type: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个活动性质',
            trigger: 'change'
          }
        ],
        resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
      },

      ruleForm2: {
        pass: '',
        checkPass: '',
        age: '',
        date1: '',
        date2: ''
      },
      rules2: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        age: [{ validator: checkAge, trigger: 'blur' }],
        date1: [{ validator: checkdate1, trigger: 'change' }],
        date2: [{ validator: checkdate2, trigger: 'change' }]
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    submitForm2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm2(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script> -->
<template>
  <h2>form表单</h2>
  <el-form ref="refForm" :model="form" label-width="80px">
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动时间">
      <el-col :span="11">
        <el-date-picker
          type="datetime"
          placeholder="选择日期"
          v-model="form.date1"
          value-format="x"
          :default-value="new Date(Date.now())"
        ></el-date-picker>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-date-picker
          type="datetime"
          placeholder="选择时间"
          v-model="form.date2"
          value-format="x"
        ></el-date-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="即时配送">
      <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活动性质">
      <el-checkbox-group v-model="form.type">
        <el-checkbox value="1" name="type">美食/餐厅线上活动</el-checkbox>
        <el-checkbox value="2" name="type">地推活动</el-checkbox>
        <el-checkbox value="3" name="type">线下主题活动</el-checkbox>
        <el-checkbox value="4" name="type">单纯品牌曝光</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊资源">
      <el-radio-group v-model="form.resource">
        <el-radio value="1">线上品牌商赞助</el-radio>
        <el-radio value="2">线下场地免费</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活动形式">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
  <hr />
  <h4>表单验证</h4>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="refRuleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="ruleForm.date1"
            value-format="x"
            :default-value="new Date(Date.now())"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-date-picker
            type="datetime"
            placeholder="选择日期2"
            v-model="ruleForm.date2"
            value-format="x"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="即时配送" prop="delivery">
      <el-switch v-model="ruleForm.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活动性质" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox value="1" name="type">美食/餐厅线上活动</el-checkbox>
        <el-checkbox value="2" name="type">地推活动</el-checkbox>
        <el-checkbox value="3" name="type">线下主题活动</el-checkbox>
        <el-checkbox value="4" name="type">单纯品牌曝光</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊资源" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio value="1">线上品牌商赞助</el-radio>
        <el-radio value="2">线下场地免费</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活动形式" prop="desc">
      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(refRuleForm)">立即创建</el-button>
      <el-button @click="resetForm(refRuleForm)">重置</el-button>
    </el-form-item>
  </el-form>
  <hr />
  <h4>自定义校验规则</h4>
  <el-form
    :model="ruleForm2"
    status-icon
    :rules="rules2"
    ref="refRuleForm2"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="密码" prop="pass">
      <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="ruleForm2.age"></el-input>
    </el-form-item>
    <el-form-item label="活动时间">
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="ruleForm2.date1"
            value-format="x"
            :default-value="new Date(Date.now())"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="ruleForm2.date2"
            value-format="x"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm2(refRuleForm2)">提交</el-button>
      <el-button @click="resetForm2(refRuleForm2)">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref, reactive } from 'vue'
var checkAge = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('年龄不能为空'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('请输入数字值'))
    } else {
      if (value < 18) {
        callback(new Error('必须年满18岁'))
      } else {
        callback()
      }
    }
  }, 1000)
}
var validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (ruleForm2.checkPass !== '') {
      refRuleForm2.value.validateField('checkPass')
    }
    callback()
  }
}
var validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm2.pass) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}
var checkdate1 = (rule, value, callback) => {
  const now = Date.now()
  if (value === '') {
    callback(new Error('请选择日期'))
  } else {
    if (value < now) {
      return callback(new Error('开始日期必须大于当前时间'))
    }
    if (ruleForm2.date1 !== '') {
      refRuleForm2.value.validateField('date2')
    }
    callback()
  }
}
var checkdate2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请选择日期'))
  } else {
    if (ruleForm2.date1 && value < ruleForm2.date1) {
      return callback(new Error('结束日期必须大于开始时间'))
    }
    callback()
  }
}
const refForm = ref(null)
const refRuleForm = ref(null)
const refRuleForm2 = ref(null)
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})
const ruleForm = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})
const ruleForm2 = reactive({
  pass: '',
  checkPass: '',
  age: '',
  date1: '',
  date2: ''
})
const rules = ref({
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ],
  region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
  date1: [
    {
      type: 'date',
      required: true,
      message: '请选择日期',
      trigger: 'change'
    }
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: '请选择时间',
      trigger: 'change'
    }
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: '请至少选择一个活动性质',
      trigger: 'change'
    }
  ],
  resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
  desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
})

const rules2 = ref({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  age: [{ validator: checkAge, trigger: 'blur' }],
  date1: [{ validator: checkdate1, trigger: 'change' }],
  date2: [{ validator: checkdate2, trigger: 'change' }]
})

function onSubmit() {
  console.log('submit!')
}
const submitForm = async (formName) => {
  await formName.validate((valid) => {
    if (valid) {
      alert('submit!')
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
function resetForm(formName) {
  formName.resetFields()
}
const submitForm2 = async (formName) => {
  await formName.validate((valid) => {
    if (valid) {
      alert('submit!')
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
function resetForm2(formName) {
  formName.resetFields()
}
</script>
